<html>
        <head>
          <meta charset="utf-8">
          <title>无标题文档</title>
          <style>
          #ul1 {background:green;}
          #ul2 {background:yellow;}
          </style>
          <script>
           window.onload=function ()
           {
               var oTab=document.getElementById('tab1');
               var oBtn=document.getElementById('btn1');
               oBtn.onclick=function ()
               {
                   var arr=[];
                   for(var i=0;i<oTab.tBodies[0].rows.length;i++)
                   {
                       arr[i]=oTab.tBodies[0].rows[i];
                   }
                   arr.sort(function (tr1, tr2){
                       var n1=parseInt(tr1.cells[0].innerHTML);
                       var n2=parseInt(tr2.cells[0].innerHTML);
                       console.log(tr1)
                       console.log(n1,n2)
                       return n1-n2;
                   });
                   for(var i=0;i<arr.length;i++)
                   {
                       oTab.tBodies[0].appendChild(arr[i]);
                   }
               };
           };
          </script>
          <style>
              #tab1{
                  margin: 20px;
                  border: 1px solid #ccc;
                  width:600px;
                  text-align: center;
              }
              tr,td{
                border: 1px solid #ccc;
              }
              #btn1{
                  margin: 20px;
              }
          </style>
        </head>
        <body>
          
          <input id="btn1" type="button" value="排序" />
          <table id="tab1">
              <tbody>
                  <tr>
                      <td>序号</td>
                      <td>姓名</td>
                      <td>年龄</td>
                      <td>操作</td>
                  </tr>
                  <tr>
                      <td>1</td>
                      <td>张三</td>
                      <td>28</td>
                      <td></td>
                  </tr>
                  <tr>
                      <td>3</td>
                      <td>关羽</td>
                      <td>28</td>
                      <td></td>
                  </tr>
                  <tr>
                      <td>4</td>
                      <td>王昭君</td>
                      <td>28</td>
                      <td></td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>李四</td>
                      <td>28</td>
                      <td></td>
                  </tr>
              </tbody>
          </table>
         
        </body>
      </html>